<template>
    <div class="user-detail">
        <el-descriptions :column="1" border size="default" v-loading="loading">
            <el-descriptions-item
                v-for="(item, index) in baseConfig"
                :key="index + 'baseConfig'" 
                :label="item.name"
                label-class-name="base-content-label"
                class-name="base-content-content">
                {{ basicInfo[item.field] || '-' }}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup lang="ts">

import { ref, reactive, watch, defineProps } from 'vue'
import { getUserDetailById } from '../../../api/user'
const props = defineProps({
    id: {
        type: [String, Number],
        default: ''
    }
})
// const props= ["id"]

let baseConfig = reactive([
    // { name: '用户名', field: 'usename' },
    { name: '昵称', field: 'nickname' },
    { name: '真名', field: 'realname' },
    { name: '性别', field: 'gender' },
    { name: '年龄', field: 'age' },
    { name: '邮箱', field: 'email' },
    { name: '电话', field: 'phone' },
    { name: '自我介绍', field: 'introduction' },
    { name: '创建时间', field: 'create_time' }
])
const loading:any = ref(false)
let basicInfo:any = ref({
    nickname:'',
    realname:'',
    gender:'',
    age:'',
    email:'',
    phone:'',
    introduction:'',
    create_time:'',
})
//@ts-ignore
watch(() => props.id, async(val: [Number, String]) => {
    if (val) {
        const result = await getUserDetailById({
            user_id:val
        })
        basicInfo.value = result.data
    }
}, {
    immediate: true,
    deep: true
})
</script>

<style lang="less" scoped>
// less中使用 ::v-deep 深度选择器更改element-ui组件的样式
// scss中vue3使用:deep(.class)  vue2使用/deep/ .class
::v-deep .base-content-label {
    width: 100px;
    font-weight: normal !important;
    font-size: 12px !important;
    color: #63686F;
    background: #FAFAFA;
}
::v-deep .base-content-content {
    font-size: 12px !important;
    color: #63686F !important;
    min-width: 150px;
    word-break: break-all;
}
.user-detail {
    padding: 16px;
}
</style>